<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script type="text/javascript" src="vue.js"></script>
	<script src="vue-resource.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		.listcolor{background-color: #AFB1B7;}
	</style>
</head>
<body>
	<div id="box">
		<input type="text" @keyup='tj($event)'v-model='txt' @keydown.down='changeDown()' @keydown.up.prevent='changeUp()'/>
		<!--<button @click='tj()'>提交</button>-->
		<div class="downlist" :style="dlist">
			<ul>
				<li v-for='(value,index) in myData' :class="{listcolor:index==now}" :data-id='index'>
					{{value}}
				</li>
			</ul>
		</div>
	</div>
	<script>
		new Vue({
			el:'#box',
			data:
			{
				myData:[],
				txt:'',
				dlist:{
					//'background-color':'#ccc',
				},
				ulist:{
					
				},
				now:-1,
			},
			methods:
			{
				tj:function(event)
				{
					if(event.keyCode == 38 || event.keyCode == 40) return;
					this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
						wd:this.txt
					},{
						//emulateJSON:true,
						jsonp:'cb',
					}).then(function(res)
					{
						console.log(res.data)
						this.myData = res.data.s;
					},function(){
						
					});
				},
				changeDown:function()
				{
					if(this.myData.length == this.now)
					{
						this.now = -1;
					}else{
						this.now++;
					}
					this.txt = this.myData[this.now];
					consolg.log(this.now)
				},
				changeUp:function()
				{
					if(this.now == -1)
					{
						this.now = this.myData.length-1;
					}else{
						this.now--;
					}
					this.txt = this.myData[this.now];
				}
			}
		});
	</script>
</body>
</html>